<html>

	<head>
		<meta charset="utf-8">
		<title>机器人设置</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<script type="text/javascript" src="js/resizeRoot.js"></script>
		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<script type="text/javascript" src="js/picker.js"></script>
		<link rel="stylesheet" href="css/app.css" />
		<style type="text/css">
			.picker {
				display: none;
				position: fixed;
				top: 0;
				z-index: 100;
				width: 100%;
				height: 100%;
				overflow: hidden;
				text-align: center;
				font-family: PingFang SC, STHeitiSC-Light, Helvetica-Light, arial, sans-serif;
				font-size: 14px;
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				user-select: none
			}
			
			.picker .picker-mask {
				position: absolute;
				z-index: 500;
				width: 100%;
				height: 100%;
				transition: all .5s;
				-webkit-transition: all .5s;
				background: transparent;
				opacity: 0
			}
			
			.picker .picker-mask.show {
				background: rgba(0, 0, 0, .6);
				opacity: 1
			}
			
			.picker .picker-panel {
				position: absolute;
				z-index: 600;
				bottom: 0;
				width: 100%;
				height: 8.526315789473685rem;
				background: #fff;
				transform: translateY(243px);
				-webkit-transform: translateY(243px);
				transition: all .5s;
				-webkit-transition: all .5s
			}
			
			.picker .picker-panel.show {
				transform: translateY(0);
				-webkit-transform: translateY(0)
			}
			
			.picker .picker-panel .picker-choose {
				position: relative;
				height: 1.754385964912281rem;
				color: #878787;
				font-size: .5rem
			}
			
			.picker .picker-panel .picker-choose .picker-title {
				line-height: 1.754385964912281rem;
				font-size: .666666666666667rem;
				text-align: center;
				color: #333
			}
			
			.picker .picker-panel .picker-choose .cancel,
			.picker .picker-panel .picker-choose .confirm {
				position: absolute;
				padding: 10px;
				top: 6px
			}
			
			.picker .picker-panel .picker-choose .confirm {
				right: 0;
				color: #fa8919
			}
			
			.picker .picker-panel .picker-choose .cancel {
				left: 0
			}
			
			.picker .picker-panel .picker-content {
				position: relative
			}
			
			.picker .picker-panel .picker-content .mask-bottom,
			.picker .picker-panel .picker-content .mask-top {
				position: absolute;
				z-index: 10;
				width: 100%;
				height: 2.385964912280702rem;
				pointer-events: none;
				transform: translateZ(0);
				-webkit-transform: translateZ(0)
			}
			
			.picker .picker-panel .picker-content .mask-top {
				top: 0;
				background: -o-linear-gradient(bottom, hsla(0, 0%, 100%, .4), hsla(0, 0%, 100%, .8))
			}
			
			.picker .picker-panel .picker-content .mask-top:after,
			.picker .picker-panel .picker-content .mask-top:before {
				display: block;
				position: absolute;
				border-top: 1px solid #ccc;
				left: 0;
				width: 100%;
				content: " "
			}
			
			.picker .picker-panel .picker-content .mask-top:before {
				display: none;
				top: 0
			}
			
			.picker .picker-panel .picker-content .mask-top:after {
				display: block;
				bottom: 0
			}
			
			.picker .picker-panel .picker-content .mask-bottom {
				bottom: 0;
				background: -o-linear-gradient(top, hsla(0, 0%, 100%, .4), hsla(0, 0%, 100%, .8))
			}
			
			.picker .picker-panel .picker-content .mask-bottom:after,
			.picker .picker-panel .picker-content .mask-bottom:before {
				display: block;
				position: absolute;
				border-top: 1px solid #ccc;
				left: 0;
				width: 100%;
				content: " "
			}
			
			.picker .picker-panel .picker-content .mask-bottom:before {
				display: block;
				top: 0
			}
			
			.picker .picker-panel .picker-content .mask-bottom:after {
				display: none;
				bottom: 0
			}
			
			.picker .picker-panel .wheel-wrapper {
				display: -ms-flexbox;
				display: -webkit-box;
				display: flex;
				padding: 0 10px
			}
			
			.picker .picker-panel .wheel-wrapper .wheel {
				-ms-flex: 1 1 1e-9px;
				-webkit-box-flex: 1;
				flex: 1;
				flex-basis: 1e-9px;
				width: 1%;
				height: 6.070175438596491rem;
				overflow: hidden;
				font-size: .5rem
			}
			
			.picker .picker-panel .wheel-wrapper .wheel .wheel-scroll {
				margin-top: 2.385964912280702rem;
				line-height: 1.263157894736842rem
			}
			
			.picker .picker-panel .wheel-wrapper .wheel .wheel-scroll .wheel-item {
				height: 1.263157894736842rem;
				line-height: 1.263157894736842rem;
				overflow: hidden;
				white-space: nowrap;
				color: #333
			}
			
			.picker .picker-footer {
				height: .701754385964912rem
			}
			
			@media (-webkit-min-device-pixel-ratio:1.5),
			(min-device-pixel-ratio:1.5) {
				.border-1px:after,
				.border-1px:before {
					-webkit-transform: scaleY(.7);
					-webkit-transform-origin: 0 0;
					transform: scaleY(.7)
				}
				.border-1px:after {
					-webkit-transform-origin: left bottom
				}
			}
			
			@media (-webkit-min-device-pixel-ratio:2),
			(min-device-pixel-ratio:2) {
				.border-1px:after,
				.border-1px:before {
					-webkit-transform: scaleY(.5);
					transform: scaleY(.5)
				}
			}
		</style>
	</head>

	<body id="uc" class="uc-center">

		<!--wrap-->
		<div id="wrap">
			<section class="uc-list uc-setting">
				<ul>
					<li>
						<a class="link-icon clearfix" href="family.html">
							<span class="rb-left">
                        <i class="user-icon"></i>
                        家庭成员
                    </span>
							<b class="rb-right">2人</b>
						</a>
					</li>
					<li class="li-control">
						<a class="clearfix">
							<span class="rb-left">
                        <i class="eletric-set-icon"></i>
                        电池状态
                    </span>
							<b class="ab-right">5%</b>
						</a>
					</li>
					<li class="li-control">
						<a class="clearfix">
							<span class="rb-left">
                        <i class="babyclock-set-icon"></i>
                        儿童锁
                    </span>
							<span class="ab-right-2">儿童锁已关闭</span>
							<b class="ab-right switch round">
                            <input id="mySwitch3" type="checkbox">
                            <label for="mySwitch3"></label>
                        </b>
						</a>
					</li>
					<li class="li-control" onclick="volumesettingShow()">
						<a class="link-icon clearfix">
							<span class="rb-left">
                        <i class="audio-set-icon"></i>
                        音量设置
                    </span>
							<b class="rb-right">0%</b>
						</a>
					</li>
					<li class="li-control">
						<a class="clearfix">
							<span class="rb-left">
                        <i class="light-set-icon"></i>
                        灯光控制
                    </span>
							<span class="ab-right-2">呼吸灯已开启</span>
							<b class="ab-right switch round">
                            <input id="mySwitch4" type="checkbox"> 
                            <label for="mySwitch4"></label>
                        </b>
						</a>
					</li>
					<li onclick="showPicker();">
						<a class="link-icon clearfix">
							<span class="rb-left">
                        <i class="alerm-set-icon"></i>
                        定时关机
                    </span>
							<b class="rb-right"></b>
						</a>
					</li>
					<li>
						<a class="link-icon clearfix" href="device.html">
							<span clas="rb-left">
                        <i class="aboutroobo-set-icon"></i>
                        <span>关于机器人</span>
							</span>
						</a>
					</li>
				</ul>
			</section>

		</div>

		<!--定时关机弹出层 未使用-->
		<div class="clock" id="closeMech" style="display: none;">
			<div>
				<p>取消定时</p>
				<p>10分钟</p>
				<p>20分钟</p>
				<p>30分钟</p>
				<p>60分钟</p>
				<p>90分钟</p>
				<p>120分钟</p>
			</div>
		</div>

		<!--儿童锁弹出层-->
		<div class="childlock" style="display: none;" id="babylock">
			<div class="lockshow">
				<p>提示信息</p>
				<p>开启童锁后，机器人上的按键功能将失效。</p>
				<p>您确定要这么做吗？</p>
				<div>
					<div><button type="button" style="margin-left: 0rem">确定</button></div>
					<div><button type="button" style="margin-left: .21rem">取消</button></div>
				</div>
			</div>
		</div>

		<!--音量设置出层-->
		<div class="volumesetting" id="volumesetting" style="display: none;">
			<div class="volumeshow">
				<p>音量设置</p>
				<div style="margin-left: 17%; width: 66%;">
					<div class="weui-slider-box">
						<img src="static/img/icon/audio-set-icon.png">
						<div class="weui-slider">
							<div id="sliderInner" class="weui-slider__inner">
								<div id="sliderTrack" style="width: 0%;" class="weui-slider__track"></div>
								<div id="sliderHandler" style="left: 0%;" class="weui-slider__handler"></div>
							</div>
						</div>
						<div id="sliderValue" class="weui-slider-box__value">0%</div>
					</div>
				</div>
				<div style="text-align: center"><button type="button">完成</button></div>
			</div>
		</div>
		<div class="picker">
			<div class="picker-mask mask-hook"></div>
			<div class="picker-panel panel-hook">
				<div class="picker-choose choose-hook">
					<span class="cancel cancel-hook">取消</span>
					<span class="confirm confirm-hook">确定</span>
					<h1 class="picker-title"></h1>
				</div>
				<div class="picker-content">
					<div class="mask-top border-1px"></div>
					<div class="mask-bottom border-1px"></div>
					<div class="wheel-wrapper wheel-wrapper-hook">

						<div class="wheel wheel-hook">
							<ul class="wheel-scroll wheel-scroll-hook">

								<li class="wheel-item" data-val="1">取消定时</li>

								<li class="wheel-item" data-val="2">立即关机</li>

								<li class="wheel-item" data-val="3">10分钟</li>

								<li class="wheel-item" data-val="4">20分钟</li>

								<li class="wheel-item" data-val="5">30分钟</li>

								<li class="wheel-item" data-val="6">60分钟</li>

								<li class="wheel-item" data-val="7">90分钟</li>

								<li class="wheel-item" data-val="8">120分钟</li>

							</ul>
						</div>

					</div>
				</div>
				<div class="picker-footer footer-hook"></div>
			</div>
		</div>
		</div>
		<script>
			//定时关机弹出层
			var timelist = [{
				text: '取消定时',
				value: 1
			}, {
				text: '立即关机',
				value: 2
			}, {
				text: '10分钟',
				value: 3
			}, {
				text: '20分钟',
				value: 4
			}, {
				text: '30分钟',
				value: 5
			}, {
				text: '60分钟',
				value: 6
			}, {
				text: '90分钟',
				value: 7
			}, {
				text: '120分钟',
				value: 8
			}];

			function time2Index(time) {
				var index = 0;
				switch(time) {
					case 0:
						index = 0;
						break;
					case -1:
						index = 1;
						break;
					case 10:
						index = 2;
						break;
					case 20:
						index = 3;
						break;
					case 30:
						index = 4;
						break;
					case 60:
						index = 5;
						break;
					case 90:
						index = 6;
						break;
					case 120:
						index = 7;
						break;
				}
				return index;
			}
			var picker = new Picker({
				data: [timelist],
				selectedIndex: [0]
			});

			function setTimeList(selectedIndex) {}

			picker.on('picker.select', function(selectedVal, selectedIndex) {
				setTimeList(selectedIndex);
			});

			picker.on('picker.change', function(index, selectedIndex) {});

			picker.on('picker.valuechange', function(selectedVal, selectedIndex) {});

			function initPicker(index) {
				console.log("initPicker: " + index);
				var indexs = [index];
				picker.setSelected(indexs);
			}

			function showPicker() {
				//界面显示与弹出窗口保持一致
				var indexs = [0];
				for(var i = 0; i < timelist.length; i++) {
					//console.log(timelist[i]);
				}
				picker.setSelected(indexs);
				picker.show();
			}

			function volumesettingShow() {
				$(".volumesetting").show()
			}
		</script>
	</body>

</html>